<template>
    <div class="modify-address">
      <p>收货地址</p>
        <ul>
            <li> <span>地址信息：</span>
                <Select v-model="model1" style="width:100px;margin-right: 15px">
                     <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
               </Select>
                <Select v-model="model1" style="width:100px;margin-right: 15px">
                    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                <Select v-model="model1" style="width:100px">
                    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </li>
            <li><span>详细地址：</span>  <Input v-model="textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input></li>
            <li><span>收货人姓名：</span>  <Input v-model="value" placeholder="Enter something..." style="width: 300px" /></li>
            <li><span>手机号码：</span>
                <Select v-model="model1" style="width:100px;margin-right: 15px">
                    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                <Input v-model="value" placeholder="Enter something..." style="width: 300px" />
            </li>
        </ul>

        <div class="box">
            <div class="box-title">
            选择收货地址
            </div>
            <div class="box-content">
                 <ul>
                     <li>江苏省徐州市铜山区万达广场soho5号楼704室（师欢畅 收）17372916644 <span>修改</span><span>删除</span></li>
                     <li>江苏省徐州市铜山区万达广场soho5号楼704室（师欢畅 收）17372916644 <span>修改</span><span>删除</span></li>
                     <li>江苏省徐州市铜山区万达广场soho5号楼704室（师欢畅 收）17372916644 <span>修改</span><span>删除</span></li>
                 </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ModifyAddress",
        data () {
            return {
                cityList: [
                    {
                        value: 'New York',
                        label: 'New York'
                    },
                    {
                        value: 'London',
                        label: 'London'
                    },
                    {
                        value: 'Sydney',
                        label: 'Sydney'
                    },
                    {
                        value: 'Ottawa',
                        label: 'Ottawa'
                    },
                    {
                        value: 'Paris',
                        label: 'Paris'
                    },
                    {
                        value: 'Canberra',
                        label: 'Canberra'
                    }
                ],
                model1: '',
                textarea:'',
                value:''
            }
        }

    }
</script>

<style  lang="less">
    @import "../../../style/style";
      .modify-address{
          width: 700px;
          height: 1286px;
          background-color: #ffffff;
          border: solid 1px #e0e0e0;
          padding: 20px !important;
          >:first-child{
              color: @theme-color-dark;
              font-size: 18px;
              border-bottom: 2px solid @theme-color-dark;
          }
          >ul{
              li{
                  margin-top: 20px;
                  color: #333333;
                  font-size: 14px;
                  .ivu-input-wrapper{
                      width: 80%;
                  }
                  span{
                      display: block;
                      width: 85px;
                      text-align: right;
                      float: left;
                  }
              }
          }
          .box{
              .box-title{
                  margin-top: 30px;
                  width: 698px;
                  height: 40px;
                  line-height: 40px;
                  background: rgba(255,83,113,0.1);
                  color: #333333;
                  font-size: 16px;
                  margin-left: -20px;
                  padding-left: 10px;
              }
              .box-content{
                  ul{
                      li{
                           margin-top: 10px;
                           font-size: 14px;
                           color: #666666;
                          span{
                              color: @theme-color-dark;
                              margin-left: 20px;
                          }
                      }
                      li:hover{
                          color: #333333;
                      }
                  }
              }

          }

      }
</style>